<template>
  <a-drawer
    :width="430"
    v-model:open="open"
    placement="right"
    :destroyOnClose="true"
    @close="onClose"
  >
    <template #title> 建立关系 </template>

    <div>主文件:&nbsp;&nbsp;{{ data.dataName }}.{{ data.fileType }}</div>
    <div style="margin-top: 24px; margin-bottom: 8px">关系描述</div>
    <a-textarea
      v-model:value="description"
      placeholder="请输入"
      :auto-size="{ minRows: 4, maxRows: 6 }"
      :maxlength="500"
    />
    <div style="margin-bottom: 8px; margin-top: 24px">文件</div>
    <div>
      <a-radio-group v-model:value="relationType" name="radioGroup">
        <a-radio value="local">本地上传</a-radio>
        <a-radio value="db">数据库</a-radio>
      </a-radio-group>
    </div>
    <template v-if="relationType === 'local'">
      <!-- <br /> -->
      <!-- <presets-radio v-model:value="presetsValue" />
      <br /> -->
      <div style="margin-top: 16px">
        <local-upload
          :data="data"
          v-model:loading="uploadLoading"
          ref="updateRef"
        />
      </div>
    </template>
    <template v-if="relationType === 'db'">
      <div style="margin-top: 16px">
        <button-db-modal :data="data" ref="dbModalRef" />
      </div>
    </template>
    <!-- <div class="fileList">
      <div class="file" v-for="{ fileName, dataId } in files">
        <div class="icon">
          <link-outlined />
        </div>
        <div class="name">
          {{ fileName }}
        </div>
        <div class="del">
          <delete-outlined @click="onDeleteFile(dataId)" />
        </div>
      </div>
    </div> -->
    <template #footer>
      <div style="text-align: right">
        <a-space>
          <a-button
            type="primary"
            @click="onSubmit"
            :loading="loading || uploadLoading"
            :disabled="loading || uploadLoading"
          >
            确定
          </a-button>
          <a-button @click="onClose">取消</a-button>
        </a-space>
      </div>
    </template>
  </a-drawer>
</template>
<script setup>
import { ref } from 'vue'
import { message as Message } from 'ant-design-vue'
// import { LinkOutlined, DeleteOutlined } from '@ant-design/icons-vue'
// import PresetsRadio from './file-conflict-presets-radio.vue'
import LocalUpload from './file-relation-drawer-upload.vue'
import ButtonDbModal from './file-relation-db-modal.vue'
import { useVModel } from '@vueuse/core'
import mockAPI from '@/api/simple-mock.js'
/**
 * 外部参数
 */
let props = defineProps({
  open: { type: Boolean, default: () => false },
  data: { type: Object, required: true },
})
// console.log(props.data)
/**
 * 事件定义
 */
let emit = defineEmits(['update:open'])
/**
 * 抽屉相关
 */
let open = useVModel(props, 'open', emit)
let showDrawer = () => {
  open.value = true
}
function onClose() {
  open.value = false
  description.value = ''
  relationType.value = 'local'
}
/**
 * 表单数据
 */
let relationType = ref('local')
let description = ref('')

//提交
let dbModalRef = ref()
let updateRef = ref()
let loading = ref(false)
async function onSubmit() {
  if (!description.value) {
    Message.warn('请填写关系描述')
    return
  }
  loading.value = true
  try {
    if (relationType.value === 'local') {
      await updateRef.value.submit({ description: description.value })
    }
    if (relationType.value === 'db') {
      await dbModalRef.value.submit({ description: description.value })
    }
    open.value = false
    description.value = ''
  } catch (e) {
    console.log(e)
  }
  loading.value = false
}
/**
 * 预设值
 */
// let presetsValue = ref(1)
/**
 * 文件上传相关
 */
let uploadLoading = ref(false)
</script>
<style scoped lang="less">
.fileList {
  margin-top: 14px;
  .file {
    display: flex;
    padding: 2px 7px;
    .name {
      flex: 1;
      margin-left: 8px;
    }
    &:hover {
      background: #f7f7f7;
    }
  }
}
</style>
